<template>
	<view>
		<view style="color: #fff;font-size: 24rpx;padding: 30rpx;background: #FB8536;text-align: center;" v-if="shipInfo.realNameStatus === '0'">
			需要承运人进行活体认证，请处理！
		</view>
		<view class="body">
			<view class="item">
				<view class="column-css view-cente">
					<view class="row-css view-cente-cle">
						<view class="view-cente-cle-text">姓名</view>
						<view style="padding-right: 30rpx;">{{ shipInfo.captain.captainName }}</view>
					</view>
				</view>
				<view class="column-css view-cente">
					<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;">
						<view class="row-css" style="flex: 1;justify-content: space-between;">
							<view class="view-cente-cle-text">手机号</view>
							<view>{{ shipInfo.captain.captainPhone }}</view>
						</view>
						<button class="reset-button" style="font-size: 28rpx;color: #4373fa;padding-left: 20rpx;" @click="changePhone">更换手机号</button>
					</view>
				</view>
				<view class="column-css view-cente">
					<view class="row-css view-cente-cle">
						<view class="view-cente-cle-text">身份证号</view>
						<view style="padding-right: 30rpx;">{{ shipInfo.captain.idcard }}</view>
					</view>
				</view>
				<view class="column-css view-cente">
					<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;border-bottom: none" @click="persondocuments()">
						<view class="row-css" style="flex: 1;justify-content: space-between;">
							<view class="view-cente-cle-text">证件管理</view>
							<view class="perfection" :style="{ color: shipInfo.captainStatus == '0' ? '#DD524D' : '#000000' }">{{shipInfo.captainStatus === '0' ? '未认证' : '已认证'}}</view>
						</view>
						<image style="width: 28rpx;height: 28rpx;" src="../../../static/icon_enter.png"></image>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="column-css view-cente">
					<view class="row-css view-cente-cle" style="justify-content: space-between;align-items: center;border-bottom: none;" @click="shake">
						<view class="row-css" style="flex: 1;justify-content: space-between;">
							<view class="view-cente-cle-text">活体认证</view>
							<view :style="{ color: shipInfo.realNameStatus == '0' ? '#DD524D' : '#000000' }">{{ shipInfo.realNameStatus === '0' ? '未认证' : '已认证' }}</view>
						</view>
						<image style="width: 28rpx;height: 28rpx;" src="../../../static/icon_enter.png"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="position-fixed" @click="onLoginout()">退出登录</view>
		<view class="row-css" style="width: 100%; position: fixed;font-size: 24rpx;bottom: 0; margin-bottom: 20rpx;justify-content: center;">
			<text style="color: #7A7A7A;" @click="onproctocl(1)">《服务协议》</text>
			与
			<text style="color: #7A7A7A;" @click="onproctocl(2)">《隐私政策》</text>
		</view>
		
		<uni-popup ref="idcardPop" type="bottom" mask-background-color="rgba(0,0,0,0.8)">
					<view class="popup-wrap">
						<view class="popup-describe">
							<image src="../../../static/icon_example_idcard01.png" mode="aspectFit"></image>
							<view>
								<view class="title">请上传身份证人像面照片</view>
								<view class="desc">
									<view>保证证件四角可见，无遮挡，无反光；</view>
									<view>姓名、身份证号码等信息清晰，无涂改</view>
								</view>
							</view>
						</view>
						<view class="popup-box">
							<view @click="onCamera('camera')">拍照</view>
							<view @click="onCamera('album')">从相册选择</view>
						</view>
						<view class="popup-cancel" @click="onCancel">取消</view>
					</view>
				</uni-popup>
				<uni-popup ref="changePhonePop" type="center">
					<view class="unipop__ui_body changePhoneBox">
							<view class="unipop__ui_tit">更换手机号</view>
							<view class="unipop__ui_close" @click="close('changePhonePop')">
								<uni-icons type="closeempty" size="20" color="#aaa"></uni-icons>
							</view>
							<view class="unipop__ui_cnt">
								<view class="form" style="padding-top: 20px;">
									<view class="form-item">
										<uni-easyinput v-model="newMobile" maxlength="11" class="input-content" placeholder="请输入新手机号" placeholder-style="font-size: 14px;" :input-border="false"></uni-easyinput>
									</view>
									<view class="form-item">
										<uni-easyinput v-model="code" maxlength="6" class="input-content" placeholder="请输入验证码" placeholder-style="font-size: 14px;" :input-border="false" :clearable="false"></uni-easyinput>
										<button class="reset-button code-btn" @click="getSmsCode('back', newMobile)">{{ smsText }}</button>
									</view>
								</view>
							</view>
							<view class="unipop__ui_btns">
								<button class="reset-button auth-btn" @click="confirmChangePhone">确认修改</button>
							</view>
					</view>
				</uni-popup>
	</view>
</template>

<script>
import dayjs from 'dayjs';
export default {
	data() {
		return {
			shipInfo: {},
			newMobile: '',
			code: '',
			smsText: '获取验证码',
			lastTimer: 0,
			userInfo: {}
		};
	},
	methods: {
		
		
		onLoginout() {
			let that = this;
			if (that.userInfo.captainPhone) {
				uni.showModal({
					title: '提示',
					content: '是否退出登录?',
					success: function(res) {
						if (res.confirm) {
							that.wxRequest({
								url: `${that.API}/miniApp/auth/wxLogoutCaptain`,
								method: 'POST',
								title: '加载中...',
								success: res => {
									uni.setStorageSync(that.DATA_KEY.userInfo, '');
									uni.setStorageSync(that.DATA_KEY.token, '');
									uni.setStorageSync(that.DATA_KEY.etpId, '');
									uni.setStorageSync(that.DATA_KEY.etpName, '');
									uni.setStorageSync(that.DATA_KEY.oldTime, '');
									uni.setStorageSync(that.DATA_KEY.loadingOrderId, '');
									uni.removeStorageSync('loginType');
									uni.switchTab({
										url: '/pages/index/taskhome'
									});
								}
							})
							console.log('确定');
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				});
			}
		},
		
		
		persondocuments() {
			uni.navigateTo({
				url: '/pages/ship/user/infoSet' + (this.shipInfo.captainStatus === '0' ? '' : '?type=edit')
			})
		},
		
		onproctocl(type) {
			uni.navigateTo({
				url: '/pages/personal/proctcol?type=' + type
			});
		},
		changePhone() {
			this.$refs['changePhonePop'].open()
		},
		shake() {
			let that = this
			uni.showModal({
				title: '认证提示',
				// #ifdef APP-PLUS
				content: '是否去进行实名认证?跳转进行实名认证后需要重新打开当前APP!',
				// #endif
				// #ifdef MP-WEIXIN
				content: '是否去进行实名认证?',
				// #endif
				success(result) {
					if (result.confirm) {
						that.goAuth()
					}
				}
			})
		},
		async goAuth() {
			const result = await this.getDriverIdCardInfo();
			this.accessToken = result.data.accessToken;
			const result2 = await this.getFaceQRCode(result.data);
			let orderNumber = result2.data.orderNumber;
			this.orderNumber = orderNumber;
			// const result3 = await this.savePlatformDriverLive(orderNumber)
			let that = this
			// #ifdef APP-PLUS
			plus.share.getServices(
				function(res) {
					uni.setStorageSync(that.DATA_KEY.shipAuthFlag, true);
					var sweixin = null;
					console.log(res);
					for (var i = 0; i < res.length; i++) {
						var t = res[i];
						console.log(t);
						if (t.id == 'weixin') {
							sweixin = t;
						}
					}
					if (sweixin) {
						console.log('dddd=', 'a=' + sweixin + '=b');
						sweixin.launchMiniProgram({
							// id: 'gh_cec8224b00da',
							id: 'gh_45eec401ff1c',
							type: 0, //0-正式版 1.测试版，2，体验版
							path: 'pages/verify/info/index?id=' + orderNumber
						});
					}
				},
				function(res) {
					console.log(JSON.stringify(res));
				}
			);
			// #endif
			
			// #ifdef MP-WEIXIN
			uni.navigateToMiniProgram({
				// appId: 'wxfd2861dc1c86b3a0',
				appId: 'wxfc1e27e05fdd062b',
				path: 'pages/verify/info/index?id=' + orderNumber,
				envVersion: 'release',
				success(res) {
					uni.setStorageSync(that.DATA_KEY.shipAuthFlag, true);
					console.log('跳转成功');
				},
				fail(res) {
					console.log('跳转失败' + JSON.stringify(res));
				}
			});
			// #endif
		},
		getDriverIdCardInfo() {
			return new Promise((resolve, reject) => {
				let that = this;
				that.wxRequest({
					url: `${that.API}/captainApp/getCaptainIdCardInfo`,
					method: 'GET',
					title: '加载中...',
					success: res => {
						resolve(res.data)
					},
					fail: err => {
						reject(err)
					}
				});
			})
		},
		getFaceQRCode(data) {
			return new Promise((resolve, reject) => {
				let that = this;
				that.wxRequestData({
					url: `${that.API2}/api/face/getFaceQRCode?access_token=` + data.accessToken,
					method: 'POST',
					data: {
						companyTaxNumber: data.taxNumber,
						realName: data.CaptainName,
						idCard: data.idcard,
						idPhotoUp: data.idcard1Base64,
						idPhotoDown: data.idcard2Base64,
						callbackUrl: `${that.API}/driverService/isLivingBodyState`
					},
					success: res => {
						resolve(res.data)
					},
					fail: err => {
						reject(err)
					}
				})
			})
		},
		savePlatformDriverLive(orderNumber) {
			return new Promise((resolve, reject) => {
				let that = this;
				that.wxRequest({
					url: `${that.API}/captainApp/savePlatformDriverLive`,
					method: 'POST',
					data: {
						captainId: that.userInfo.captainId, //船长id
						orderNumber: orderNumber, //活体编号
						accessToken: that.accessToken
					},
					success: res => {
						resolve(res.data)
					},
					fail: err => {
						reject(err)
					}
				})
			})
		},
		getShipInfo() {
			this.wxRequest({
				url: `${this.API}/captainApp/captainAuthentication?etpId=${uni.getStorageSync(this.DATA_KEY.etpId)}`,
				method: 'GET',
				success: res => {
					if (res.data.code == 0) {
						this.shipInfo = res.data.data
					}
				}
			});
		},
		close(name) {
			this.$refs[name].close()
			if (name == 'changePhonePop') {
				this.newMobile = '';
				this.code = '';
				this.smsText = '获取验证码';
				this.lastTimer = 0;
			}
		},
		// 发送短信验证码  60秒
					getSmsCode(event, mobile) {
					  let lastSendTimer = this.lastTimer;
					
					  let duration = dayjs().unix() - lastSendTimer;
					  let canSend = duration >= 60;
					
					  if (!canSend) {
							uni.showToast({
								title: '请稍后再试',
								icon: 'none'
							})
					    return;
					  }
						var reg = /^1[3456789]\d{9}$/;
					  if (!reg.test(mobile)) {
							uni.showToast({
								title: '手机号码格式不正确',
								icon: 'none'
							})
					    return;
					  }
						// this.lastTimer = dayjs().unix();
						// this.getSmsTimer()
						this.wxRequest({
							url: `${this.API}/miniApp/auth/sms-code-tel?tel=` + mobile,
							method: 'GET',
							title: '验证码发送中...',
							success: res => {
								if (res.data.code == 0) {
									uni.showToast({
										title: '验证码已发送',
										icon: 'none'
									});
									this.lastTimer = dayjs().unix();
									this.getSmsTimer()
								}
							}
						});
					
					},
					getSmsTimer(event) {
					  let lastSendTimer = this.lastTimer;
					
					  let duration = dayjs().unix() - lastSendTimer - 60;
					  let canSend = duration >= 0;
					  if (canSend) {
					    this.smsText = '获取验证码';
					  }
					
					  if (!canSend) {
					    setTimeout(() => {
					      duration++;
								this.getSmsTimer(event)
					    }, 1000);
					    this.smsText = -duration.toString() + ' 秒';
					  }
					},
					confirmChangePhone() {
						if (!this.newMobile) {
							uni.showToast({
								title: '请输入手机号',
								icon: 'none'
							})
							return;
						}
						var reg = /^1[3456789]\d{9}$/;
						if (!reg.test(this.newMobile)) {
							uni.showToast({
								title: '手机号码格式不正确',
								icon: 'none'
							})
						  return;
						}
						if (!this.code) {
							uni.showToast({
								title: '请输入验证码',
								icon: 'none'
							})
							return;
						}
						if (this.code.length != 6) {
							uni.showToast({
								title: '验证码输入错误',
								icon: 'none'
							})
							return;
						}
						let that = this
						this.wxRequest({
							url: `${this.API}/captainApp/smsCaptainPhone`,
							method: 'POST',
							data: {
								captainPhone: this.newMobile,
								code: this.code
							},
							title: '修改中...',
							success: (res => {
								if (res.data.code == 0) {
									let mobile = that.newMobile
									this.close('changePhonePop')
									uni.showModal({
										title: '提示',
										content: '修改成功，是否重新登录？',
										success: (result) => {
											if (result.confirm) {
												uni.setStorageSync(that.DATA_KEY.userInfo, '');
												uni.setStorageSync(that.DATA_KEY.token, '');
												uni.setStorageSync(that.DATA_KEY.etpId, '');
												uni.setStorageSync(that.DATA_KEY.etpName, '');
												uni.setStorageSync(that.DATA_KEY.oldTime, '');
												uni.setStorageSync(that.DATA_KEY.loadingOrderId, '');
												uni.removeStorageSync('loginType');
												uni.reLaunch({
													url: '/pages/personal/login'
												})
											} else {
												this.getShipInfo()
											}
										}
									})
									
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
									reject(err)
								}
							}),
							fail: (err => {
								reject(err)
							})
						})
					}
	},
	onLoad() {
		this.userInfo = uni.getStorageSync(this.DATA_KEY.userInfo);
		this.getShipInfo();
	},
	async onShow() {
		if(uni.getStorageSync(this.DATA_KEY.shipAuthFlag)) {
			await this.savePlatformDriverLive(this.orderNumber);
			uni.setStorageSync(that.DATA_KEY.shipAuthFlag, false);
			this.getShipInfo();
		}
	},
	onUnload() {
		if(uni.getStorageSync(this.DATA_KEY.shipAuthFlag)){
			uni.setStorageSync(that.DATA_KEY.shipAuthFlag, false);
		}
	}
};
</script>

<style lang="scss">
$color-primary: #2B7CFF;
.reset-button {
	  padding: 0;
	  margin: 0;
	  font-size: inherit;
	  background-color: transparent;
	  color: inherit;
	  position: relative;
	  border: 0rpx;
	  /* #ifndef APP-NVUE */
	  display: flex;
	  /* #endif */
	  align-items: center;
	  justify-content: center;
	  box-sizing: border-box;
	  text-align: center;
	  text-decoration: none;
	  white-space: nowrap;
	  vertical-align: baseline;
	  transform: translate(0, 0);
	}
	// .reset-button.button-hover {
	//   transform: translate(1px, 1px);
	//   background: none;
	// }
	
	.reset-button::after {
	  border: none;
	}
	.result-content {
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #333;
	}
page {
	font-size: 30rpx;
	background: #f9f9f9;
}
.body{
	padding: 24rpx;
	.item{
		background: #fff;
		border-radius: 14rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
	}
}
.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.view-cente {
	background: #ffffff;
	padding: 0 30rpx;
}
.view-cente-cle {
	padding: 25rpx 0;
	border-bottom: 1rpx solid #eeeeee;
	justify-content: space-between;
}
.view-cente-cle-text {
	width: 180rpx;
	color: #5f6579;
}
.perfection {
	border-radius: 25rpx;
	padding: 5rpx 10rpx;
	color: #ffffff;
}

.position-fixed {
	background: #ffffff;
	display: flex;
	position: fixed;
	bottom: 50rpx;
	justify-content: center;
	border: 1rpx solid #007aff;
	border-radius: 10rpx;
	color: #007aff;
	padding: 20rpx;
	margin: 40rpx;
	width: 84%;
	font-size: 30rpx;
}

	.unipop__ui_body {
			background-color: #fff;
			border-radius: 12px;
			text-align: center;
			position: relative;
		}
		@media screen and (min-width: 352px) {
			.unipop__ui_body {
				width: 320px;
			}
		}
		
		.unipop__ui_tit {
			padding: 32px 24px 16px;
			font-size: 17px;
			color: rgba(0, 0, 0, 0.9);
			font-weight: 700;
			font-size: 17px;
			line-height: 1.4;
			position: relative;
		}
		.unipop__ui_close {
			position: absolute;
			right: 15px;
			top: 15px;
			
		}
		.unipop__ui_cnt {
			padding: 0 24px;
			margin-bottom: 32px;
			font-size: 17px;
			line-height: 1.4;
			word-wrap: break-word;
			color: rgba(0, 0, 0, 0.5);
		}
		.unipop__ui_btns {
			display: flex;
			position: relative;
		}
		.unipop__ui_btns::after {
			content: " ";
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			height: 1px;
			border-top: 1px solid rgba(0,0,0,0.1);
			color: rgba(0,0,0,0.1);
			transform-origin: 0 0;
			transform: scaleY(0.5);
		}
		.unipop__ui_btns .btn {
			flex: 1;
			font-size: 17px;
			line-height: 1.4;
			font-weight: 600;
			color: #576b95;
			padding: 16px 23px;
			user-select: none;
			position: relative;
		}
		.unipop__ui_btns .btn.btn-default {
			color: rgba(0, 0, 0, 0.9);
		}
		.unipop__ui_btns .btn:first-child::after {
			display: none;
		}
		.unipop__ui_btns .btn::after {
			content: " ";
			position: absolute;
			left: 0;
			top: 0;
			width: 1px;
			bottom: 0;
			border-left: 1px solid rgba(0,0,0,0.1);
			color: rgba(0,0,0,0.1);
			transform-origin: 0 0;
			transform: scaleX(0.5);
		}
		
		
		.form-box {
			padding: 30rpx;
		}
		.form-item {
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 20rpx;
			font-size: 16px;
			&:last-child {
				margin-bottom: 0;
			}
			&::after {
				content: " ";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 1px;
				border-bottom: .5px solid #e5e5e5;
			}
			&__label {
				width: 5em;
				font-size: 28rpx;
			}
			.input-content {
				font-size: 28rpx;
			}
			
		}
		
		.code-btn {
				background-color: $color-primary;
				color: #fff;
				font-size: 14px;
				height: 28px;
				width: 80px;
				padding: 0 10px;
			}
			.auth-btn {
				background-color: $color-primary;
				color: #fff;
				margin: 10px auto;
				padding: 0 20px;
			}
			
			.changePhoneBox .uni-easyinput__content-input {
					padding-left: 0 !important;
				}
</style>
